<template>
<div>
    <!--采购入库标题-->
    <el-row style="margin-right: 150px">
        <el-col :span="24"><div class="grid-content bg-purple-dark">
            <span style="font-size: 25px">采购入库</span>
        </div></el-col>
    </el-row>

    <!--供应商和采购人-->
    <el-row>
        <el-col :span="6"><span> </span><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="6" style="margin-left: 60px;margin-top: 40px"><div class="grid-content bg-purple-light">
            <!--下拉框和采购员-->
            <span>供应商: </span>
            <select style="margin-left: 20px;width: 200px;height: 28px;" id="supplierId" @change="findAll">
                <option v-for="supplier in suppliers" :key="supplier" :value="supplier.id">{{supplier.name}}</option>
            </select>
        </div></el-col>
        <el-col :span="6" style="margin-top: 40px"><div class="grid-content bg-purple">
            <span>采购人:</span> <span  style="margin-left: 20px;">{{$store.state.user.userBean.real}}</span>
        </div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>

    <span style="float: left;font-weight: bold;margin: 10px">采购物品</span>

    <!--表格-->
    <el-row style="margin-top: 15px;margin-left: 25px">
        <el-col :span="24"><div class="grid-content bg-purple-dark">
            <template>
                <el-table
                        ref="singleTable"
                        :data="tableData"
                        highlight-current-row
                        @current-change="handleCurrentChange"
                        height="280"
                        style="width: 55%">
                    <el-table-column
                            type="index"
                            width="50">
                    </el-table-column>
                    <el-table-column
                            property="name"
                            label="商品名称"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            property="mill"
                            label="厂家"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            property="purchase"
                            label="建议采购价"
                            width="80">
                    </el-table-column>
                    <el-table-column
                            property="sale"
                            label="建议销售价"
                            width="80">
                    </el-table-column>
                    <el-table-column
                            label="采购数量"
                            width="280">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.count" :placeholder="请输入数量" @input="getNumber"  @change="update(scope.row.id)"></el-input>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </div></el-col>
    </el-row>

    <!--按钮-->
    <div style="float: left; margin-left: 45px;margin-top: 50px">
        <el-button type="success" @click="addShow">添加商品</el-button>
        <el-button type="success" @click="del">移除商品</el-button>
        <el-button type="success" @click="input">入库</el-button>
    </div>

    <!--添加页面-->
    <el-dialog
            title="添加供应商信息"
            :visible.sync="dialogVisible"
            width="30%">
        <el-form ref="form" :model="form" label-width="100px" style="margin-right: 90px;margin-left: 50px">
            <el-form-item label="商品编号">
                <el-input v-model="productNum"></el-input>
            </el-form-item>
            <el-form-item label="商品名称">
                <el-input v-model="name"></el-input>
            </el-form-item>
            <el-form-item label="厂家">
                <el-input v-model="mill"></el-input>
            </el-form-item>
            <el-form-item label="类别">
                <select style="width: 225px;height: 40px;" name="" id="typeId">
                    <option v-for="type in types" :key="type" :value="type.id">{{type.name}}</option>
                </select>
            </el-form-item>
            <el-form-item label="建议采购价">
                <el-input v-model="purchase"></el-input>
            </el-form-item>
            <el-form-item label="建议销售价">
                <el-input v-model="sale"></el-input>
            </el-form-item>
            <el-form-item label="采购数量">
                <el-input v-model="count"></el-input>
            </el-form-item>
            <el-upload
                    class="avatar-uploader"
                    action="jxc/inputCar/upload"
                    :show-file-list="false"
                    name = "imgFile"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </el-form>
        <el-button type="success" @click="add">添加</el-button>
    </el-dialog>
</div>
</template>

<script>
    export default {
        name: "InputCar",
        data(){
            return{
                dialogVisible: false,
                suppliers: "",
                types: "",
                username: "",
                userId:"",
                tableData:"",
                number:"",
                inputCarId:"",
                imageUrl: '',


                //添加数据
                productNum:"",
                name:"",
                mill:"",
                purchase:"",
                sale:"",
                count:"",
                imgPath:"",

            }
        },mounted() {
            this.init();
            this.atoB()
        },methods:{
            handleCurrentChange(val){
                this.inputCarId = val.id
            },
            init(){
                // console.log(this.$store.state.user.username);
                this.axios.get("jxc/supplier/findAll").then(
                    r => {
                        this.suppliers = r.data;
                        let url = "jxc/inputCar/findBySupplierAndUser/"+r.data[0].id;
                        this.axios.get(url).then(
                            r => {
                                this.tableData = r.data
                            }
                        )
                    }
                );

            },
            selectValue(){
                let id = document.getElementById("supplierId");
                console.log(id.options[id.selectedIndex].value);
                return id.options[id.selectedIndex].value
            },
            findAll(){
                let url = "jxc/inputCar/findBySupplierAndUser/"+this.selectValue();
                this.axios.get(url).then(
                    r => {
                        this.tableData = r.data
                    }
                )
            },
            update(id){
                let formData = new FormData();
                formData.append("inputCarId",id);
                formData.append("number",this.number);
                this.axios.put("jxc/inputCar/update",formData).then(
                    r => {
                        if (r.data == "ok"){
                            this.$message({
                                message: '修改成功',
                                type: 'success',
                                duration:1000
                            });
                        }else if (r.data == "no"){
                            this.$message({
                                message: '修改失败',
                                type: 'error',
                                duration:1000
                            });
                        }
                    }
                )
            },
            getNumber(number){
                this.number = number;
            },

            //删除购物车
            del(){
                console.log(this.inputCarId)
                // let formData = new FormData;
                // formData.append("id",this.inputCarId);
                let url = "jxc/inputCar/del/"+this.inputCarId;
                this.axios.delete(url).then(
                    r => {
                        if (r.data == "ok"){
                            this.$message({
                                message: '删除成功',
                                type: 'success',
                                duration:1000
                            });
                        }else if (r.data == "no"){
                            this.$message({
                                message: '删除失败',
                                type: 'error',
                                duration:1000
                            });
                        }
                        this.init();
                    }
                )
            },

            //上传文件
            handleAvatarSuccess(res, file) {
                // console.log(res.code);
                if (res.code == "0"){
                    this.imgPath = res.imgUrl;
                    this.$message.success("上传成功")
                }else {
                    this.$message.success(res.imgUrl);
                }
                this.imageUrl = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 10;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },

            //添加购物车
            addShow(){
                this.axios.get("jxc/type/findAll").then(
                    r => this.types = r.data
                );
                this.dialogVisible = true;
            }, //打开添加购物车弹框
            getSelect(){
                let type = document.getElementById("typeId");
                return type.options[type.selectedIndex].value;
            },//获取typeId（类别id）
            add(){
                let formData = new FormData();
                formData.append("number",this.productNum);
                formData.append("name",this.name);
                formData.append("mill",this.mill);
                formData.append("purchase",this.purchase);
                formData.append("sale",this.sale);
                formData.append("count",this.count);
                formData.append("img",this.imgPath);
                formData.append("typeId",this.getSelect());
                formData.append("userId",this.userId);
                formData.append("supplierId",this.selectValue());
                this.axios.post("jxc/inputCar/add",formData).then(
                    r => {
                        if (r.data == "ok"){
                            this.$message({
                                message: '添加成功',
                                type: 'success',
                                duration:1000
                            });
                        }else if (r.data == "no"){
                            this.$message({
                                message: '添加失败',
                                type: 'error',
                                duration:1000
                            });
                        }
                        this.findAll();
                        this.dialogVisible = false;
                    }
                )
            },
            //入库
            input(){
                let url = "jxc/inputCar/delAll/"+this.selectValue()+"/"+this.userId;
                this.axios.delete(url).then(
                    r => {
                        if (r.data == "ok"){
                            this.$message({
                                message: '入库成功',
                                type: 'success',
                                duration:1000
                            });
                        }else if (r.data == "no"){
                            this.$message({
                                message: '入库失败',
                                type: 'error',
                                duration:1000
                            });
                        }
                        this.findAll();
                    }
                )
            }

        },
        computed: {
            // eslint-disable-next-line vue/return-in-computed-property
            atoB() {
                // eslint-disable-next-line vue/no-side-effects-in-computed-properties
                this.username = this.$store.state.user.userBean.username;
                // eslint-disable-next-line vue/no-side-effects-in-computed-properties
                this.userId =  this.$store.state.user.userBean.id
            },
        },
    }
</script>

<style scoped>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>